Para añadir iBox podemos descargar los archivos necesarios desde la página o bien descargando este ZIP donde amablemente J.Miur ha adaptado y modificado los archivos para Blogger y pone a disposición de todos.
J.Miur nos proporciona en el ZIP dos archivos CSS que son dos modelos diferentes de visionar la ventana modal, cualquiera de ellos es válido y podemos probar para ver cual se ajusta a nuestro gusto antes de decidirnos.
Para utilizar los archivos del ZIP extraemos darkbox.css, lightbox.css y ibox.js .Una vez tenemos los archivos los alojamos en nuestro servidor y los añadimos a nuestra plantilla justo antes de </head> de la siguiente forma:
<script type="text/javascript" src="URL_ibox.js"></script>
<link rel="stylesheet" href="URL_lightbox.css" type="text/css" media="screen"/>
Añadidos los scripts a la plantilla podemos ver en funcionamiento la ventana modal cuando agregamos el atributo rel="ibox" a cualquier enlace.
Imagen-icono:
<a href="URL_imagen" rel="ibox" title="Texto optativo">texto o imagen de enlace </a>
Un documento:
<a href="URL_pagina" rel="ibox" title="Texto optativo">texto o imagen de enlace</a>
Un vídeo:
<a href="http://www.youtube.com/watch?v=(aquí más código)" rel="ibox">texto o imagen de enlace</a>
Una imagen 
Contenido oculto 
Un vídeo
Para añadir una imagen o icono para enlazar bastará con sustituir donde dice "texto o imagen de enlace" por <img src="url-de-la-imagen"> Esto es sólo un ejemplo, en Vagabundia encontraréis información más detallada sobre iBox y variaciones para configurarlo.
esto se ve padre gem@, muy a aplicarlo para ver que tal, un saludo!!
Un saludo sharys me alegra que te agrade ;)
hola
muy interesante este script..pero no se podria añadir el script directamente como codigo a la plantilla?? sin tener que copiar los CSS? por si no se tiene acceso ftp al servidor
saludos :D
Supongo que si, aunque no he probado Alexmosutheskypirate pero el script es tan extenso que ocuparía como dos veces una plantilla. Puedes verlo si lo descargas a tu PC y lo buscas en el blog de notas, creo te olvidarás de añadirlo directamente a la plantilla ;)
Hola Gema, te formulo una pregunta de novata total: No se como subir p. ej, la URL de una imágen a un servidor, el caso es que creo que lo he hecho pero no se como. Como verás estoy muy despistada, tengo ganas que lleguen las vacaciones y ponerme a estudiar, te juro que me voy a poner las pilas. Gracias por tu paciencia.
Aseret disculpa qu en viera este comentario antes, verás... la url de una imagen no la subimos sino que la conseguimos subiendo una imagen a un servidor.
Cuando accedemos a un servidor, ya sea Google Page o el mismo Blogger la imagen desde ese mismo momento ya tiene url, ya se encuentra alojada en un servidor con una url única, ya que en Internet no puede haber dos direcciones iguales, puede que se llame de nombre igual, o incluso que el alojamiento sea el mismo pero variará en algún otro detalle.
Para saber la url de una imagen hay un método de los más sencillo, pones el ratón sobre la imagen, pulsas botón derecho y nos muestra propiedades. Esas propiedades nos muestra también las propiedades de imagen y la dirección (url).
Gracias, lo he aplicado a un blog que aún estoy creando, con gusto te lo mostraré cuando termine :)!
una pregunta se puede cambian los valores del ibox para q abra videos
de megavideo.com ? es que no me gusta
mucho youtube XD saludos eso me gustaria saber esta bueno el script
saludos es de mucha ayuda tu blog
Lamento contestar tan tarde Mauricio, había visto tu comentario y por supuesto estaré encantada de ver como ha quedado :)
DeSfAuSeR he probado antes de contestarte y si, puedes añadir vídeos de megavideo.com el problema que he visto es que al copiar la url del vídeo (no la de la página) sino la url que nos llevará a visualizar el vídeo, nos muestra el vídeo en tamaño es muy grande.
Lo podrías solucionar modificando el archivo CSS, la parte de el tamaño de la ventana modal.
hey! gema!!! recuerdas que te había hablado sobre la iBox en mi blog...pues ya he terminado el diseño :P y me ha gustado mucho...puedes checar el efecto en la parte de abajo en la sección de videos, ojalá te guste, ah y no se que tipo de música te guste pero si te agrada la del blog, me gustaría que te suscribieras :) je bueno ps esperare tu respuesta y tu comentario global sobre todo el diseño de mi blog.
Enlace: DEPTRA
No funciona en IE
en IE lo que hace es descargar la imagen
Hola! Utilizo el Ibox en blogger y las imágenes sólo se cargan para imágenes alojadas en googlepages o en photobucket, no en blogspot. ¿Me podrías ayudar?
¿Cómo haces para que se carguen las imágenes alojadas en el blog, es decir, en blogspot, con el Ibox? ¡Yo no puedo hacerlo! Por favor, ayúdame! Gracias :-)
Juan José de los dos tamaños que proporciona Blogger utiliza el pequeño, si no te funciona no puedo saber donde está el error sin verlo :(
En internet explorer 7 y superiores no funciona. Me pueden ayudar???
Gracias y saludos
Yo tengo el 7 y no veo ningún problema Josema :O
Uy, esta hace competencia con la mia...
Saludos!
Les recomiendo este sitio, explica en 3 pasos como hacer una ventana modal.
http://www.elwebmaster.com/articulos/ventana-modal-con-jquery-en-3-pasos/comment-page-1#comment-14745
yz ruido4design no he podido verla sólo veo las indicaciones para hacer unos cambios ¿no hay un ejemplo?
yz Juan Felipe me pasa lo mismo que en el anterior comentario no veo el ejemplo.
Sólo que se trata de una ventana modal con jQuery :(
Claro, no está el ejemplo, pero está todo el codigo, crea un archivo html, pega el codigo y adjuntale la librería jquery para que lo veas funcionando, es un muy buen ejemplo, yo lo uso para el fondo que la hace modal, la verdad tengo mi propia librería... bueno me basé en otra de alertas pero me hace lo que necesito y sin mucho codigo. Exitos ;)
Vean este sitio, es gratuito y para que todos lo usen, aún está en desarrollo pero ya es usable, está hecho 100% con la librería JQuery y GoogleMaps. si tienen comentarios mi correo es ingjuanfelipe @ gmail . com
El sitio es http://www.tiendamaps.com
Exitos para todos. ;)
Gem@ aquí te dejo el link para que puedas ver el funcionamiento de dicho codigo http://www.queness.com/resources/html/modal/jquery-modal-window.html
yz El efecto está muy lindo Juan Felipe, el problema es que si añadimos otros efectos deben ser también de la librería jQury porque crea conflictos usar librerías distintas.
Yo uso como ventana modal Lytebox es un script muy liviano porque no requiere de otros scripts para su funcionamiento.
http://gemablog-.blogspot.com/2007/12/lytebox-visor-de-imgenes-slideshow.html
De todas formas te agradezco el detalle de buscar el ejemplo :)
Gemma, no quiero molestar, pero no me resulta.Lo he hecho como tu Y Jmiur lo dijeron y no aparece la ventana.
Alojé los archivos primero en skydrive...no resulto
Luego en xooimage...tampoco....
No se que hacer, porque los videos de youtube estan muy grandes y ya no entran en mi main y esta ventana me parece muy buena tanto para videos como para imagenes...incluso texto..
Besos
:o
LIZ
Te dejo dondo hice la prueba
AQUI PRUEBA
Tambien le dejé un mensaje en Vagabundia...
Besitos
:O :O :O :O
LIZ
Gemma ahora subi los archivos a google site y tampoco funciona....no se abre ni youtube!!! :O :O :O
Que hago mal? :o
Sniff :o
siempre me resultan los trucos...
me syudas :O
gracias
besis
LIZ
No te preocupes por mi querida Gemma...Jmiur me estña ayudando :)
Pero tengo mas preguntas...tu sabes que nunc acaban jajajaj!!!
Besotes y descansa donde este
:D
LIZ
yz Liz me resulta muy complicado ayudarte desde aquí porque no puedo acceder a tu blog, pero me queda la tranquilidad que estás en inmejorables manos :)
Sigue sus consejos J.Miur es mucho J.Miur :D
Gema te queria preguntar si es posible poner un texto en una ventana modal (como el de contenido oculto) pero que tu lo escribas en el codigo.
:: CHiCken ahí puedes incluir cualquier texto, eso que ves de Lorem ipsum dolor sit amet.... es el contenido y puedes escribir lo que tu quieras.
Hola! estoy interesado en aplicar esto en mi blog...
La verdad que no entiendo mucho :$
Más que nada esta parte:
"Para utilizar los archivos del ZIP extraemos darkbox.css, lightbox.css y ibox.js .Una vez tenemos los archivos los alojamos en nuestro servidor y los añadimos a nuestra plantilla"
Espero que puedas ayudarme, saludos!
www.eljuegoquebuscabas.com.ar
:: GameAdicto el archivo ibox.js es imprescindible luego debes escoger entre darkbox.css o lightbox.css (de esos dos uno) que son los estilos de la ventana, una vez los extraes del archivo zip buscas un servidor que permita alojar archivos por ejemplo Googoe Sites al que puedes acceder con tu misma cuenta y contraseña de Blogger.
http://sites.google.com/
Cuando ya los tienes subidos al servidor copias la url del archivo ibox.js y la pegas donde dice
<script type="text/javascript" src="aquí-pegas-la- url-de-tu archivo-ibox.js"></script>
Luego haces lo mismo con el archivo css
<link rel="stylesheet" href="aquí-pegas-la- url-de-tu archivo-lightbox.css" type="text/css" media="screen"/>
y esos dos códigos los pegas en plantilla justo antes de </head>
Saludos Gem@, espero te encuentres bien, he implementado esto de iBox en mi blog y me ha quedado muy bien, pero me gustaría hacerte una consulta al respecto, cuando le aplico el efecto a una imagen me gustaría que al hacer clic sobre ella esta se viera en tamaño real, por ejemplo le he aplicado el efecto a una imagen cuyo tamaño original es de 709x1050 pixeles pero al hacer clic sobre ella se abre con estas dimensiones: 349x527. Será posible lograr que al hacer clic sobre la imagen esta se muestre en sus dimensiones reales… Agradezco tu respuesta. ;)
:: Albus Dumbledore según dice JMiuer en su tutorial al que se accede desde el enlace dela entrada si añadimos al html de la imagen el width de esta forma conseguimos mostrar la imagen en el tamaño que especificamos rel="ibox&width=350" sin embargo estuve probando y recuerdo que no me resultaba bien :S
hola, te quería preguntar si se puede utilizar para abrir una pagina web, o si saves de alguna manera de abrir una web con una ventana modal
:: No lo he probado nunca Krone pero si no recuerdo mal JMiur de Vagabundia si que dio solución una vez a eso que planteas :)
Nota: solo los miembros de este blog pueden publicar comentarios.